<div style="padding-top: 15px; padding-bottom: 15px;">
	<div class="container">
		<a routerLink="/learn" class="btn btn-outline-dark" style="margin-top: 5px;">Back</a>
		<h2>Particles</h2>
		<p>nunuStudio has a dedicated particle engine, the particle object encapsulates a Emitter and a Group that can be easily edited in the Particle Editor, but more Emitters can be added programmatically during runtime.</p>
		<p>To add a new particle object select it from the tool bar. All new particle objects are created with the default template.</p>
		<img src="assets/learn/basics/particles/select.png" style="width:20%; margin-left:40%"/>

		<h3>Particle Editor</h3>
		<p>The particle editor can be used to customize the particle object. To open the particle editor, double click on the particle object in the object explorer, a new tab with the particle editor will open.</p>
		<img src="assets/learn/basics/particles/editor.png" style="width:60%; margin-left:20%"/>
		<br/>
		<p>Here are some of the basic attributes of a particle emitter. Its possible to control these attributes using scripts as well.</p>
		<ul>
			<li><p>Particle Count - Maximum number of particles</p></li>
			<li><p>Texture - Particle emitter have a texture attached to them this texture to them.</p></li>
			<li><p>Direction - If set backwards the particle starts at its endind position.</p></li>
			<li><p>Particle Rate - How many particles to emitt relative to the age of a particle.</p></li>
			<li><p>Emitter Type - Shape of the emitter (Box, Circle or Sphere).</p></li>
			<li><p>Max Age - Age of the particles created.</p></li>
			<li><p>Position - Position of the particle on creation relative to the emitter.</p></li>
			<li><p>Velocity - Velocity of the particle on creation.</p></li>
			<li><p>Acceleration - Acceleration of the particle.</p></li>
			<li><p>Rotation - Rotation of the particle along its lifespan.</p></li>
			<li><p>Color - Color of the particle along its lifespan.</p></li>
		</ul>

		<h3>Example</h3>
		<p>In the demo bellow we can see a particle emitter object in action.</p>

		<app-viewer fname="assets/learn/basics/particles/particle.nsp"></app-viewer>
	</div>
</div>
